<template>
  <div class="ver-code">
    <canvas id="canvas" width="120" height="39" @click="verClick"></canvas>
  </div>
</template>

<script>
  export default {
    name: "Verification",
    data () {
      return {
        context: null, // 舞台，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
        arr: [], // 定义一个数组用来一个一个的接收draw()函数中txt产生的1随机数
        verCode: '', // 验证码
      }
    },
    mounted () {
      let canvas = document.getElementById("canvas"); //获取canvas，以进行绘制
      this.context = canvas.getContext("2d");
      this.draw();//直接调用绘制函数

    },
    watch: {
      verCode () { //如果verCode发生变化
        this.$emit('verCodeReady', this.verCode) //把新的验证码发送出去
      }
    },
    methods: {
      getColor() {// 随机颜色函数
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
      },

      draw() {//绘制函数
        this.context.strokeRect(0, 0, 120, 40); //绘制矩形（无填充）(这里表示相对于canvas的0，0位置；宽120，高40处绘制像素)
        let aCode = ["0","1","2","3","4","5","6","7","8","9",
          "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
        // 绘制的字母

        for (let i = 0; i < 4; i++) {//产生4个随机数
          let x = 20 + i * 20; //每个字母之间间隔20
          let y = 20 + 10 * Math.random(); //y轴方向位置为20-30随机
          let indexes = Math.floor(Math.random() * aCode.length); //产生随机索引值
          let txt = aCode[indexes];//根据随机索引值获取一个随机数

          this.context.font = "bold 20px 微软雅黑"; //设置或返回文本内容的当前字体属性
          this.context.fillStyle = this.getColor(); //设置或返回用于填充绘画的颜色、渐变或模式，随机
          this.context.translate(x, y); //重新映射画布上的 (0,0) 位置，字母不可以旋转移动，所以移动容器
          let deg = 90 * Math.random() * Math.PI / 180; //0-90度随机旋转
          this.context.rotate(deg); // 	旋转当前绘图
          this.context.fillText(txt, 0, 0); //在画布上绘制“被填充的”文本
          this.context.rotate(-deg); //将画布旋转回初始状态
          this.context.translate(-x, -y); //将画布移动回初始状态
          this.arr[i] = txt //1个1个的接收产生的随机数
        }
        for (let i = 0; i < 8; i++) {// 绘制干扰线条
          this.context.beginPath(); //起始一条路径，或重置当前路径
          this.context.moveTo(Math.random() * 120, Math.random() * 40); //把路径移动到画布中的随机点，不创建线条
          this.context.lineTo(Math.random() * 120, Math.random() * 40); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
          this.context.strokeStyle = this.getColor(); //随机线条颜色
          this.context.stroke(); // 	绘制已定义的路径
        }
        for (let i = 0; i < 20; i++) {// 绘制干扰点，和上述步骤一样，此处用长度为1的线代替点
          this.context.beginPath();
          let x = Math.random() * 120;
          let y = Math.random() * 40;
          this.context.moveTo(x, y); //把路径移动到画布中的随机点，不创建线条
          this.context.lineTo(x + 1, y + 1);
          this.context.strokeStyle = this.getColor();
          this.context.stroke(); // 	绘制已定义的路径
        }

        this.verCode = this.arr.join('') // 获取本次的验证码
      },

      verClick () { //当被点击时
        // console.log(this.arr.forEach(i => i));
        this.context.clearRect(0, 0, 120, 40); //在给定的矩形内清除指定的像素(这里表示相对于canvas的0，0位置；宽120，高40处清除绘制像素)
        this.draw();// 调用绘制函数
      },

    },
  }
</script>

<style scoped>
  .ver-code {
    background-color: #fff;
  }
</style>